<template>
  <div class="index">
    <div class="i-input">
      <div class="title">成绩查分系统</div>
      <div class="input-div">
        <div class="name">
          <svg
            class="icon"
            aria-hidden="true"
          >
            <use xlink:href="#icon-mingzi"></use>
          </svg>
          <input
            type="text"
            placeholder="请输入姓名"
            v-model="form.name"
          >
          <svg
            v-show="form.name"
            class="icon delete"
            aria-hidden="true"
            @click="clear('name')"
          >
            <use xlink:href="#icon-delete2"></use>
          </svg>
        </div>
        <div class="phone">
          <svg
            class="icon"
            aria-hidden="true"
          >
            <use xlink:href="#icon-shouji"></use>
          </svg>
          <input
            type="text"
            placeholder="请输入手机号码"
            v-model="form.phoneNo"
          >
          <svg
            v-show="form.phoneNo"
            class="icon delete"
            aria-hidden="true"
            @click="clear('phone')"
          >
            <use xlink:href="#icon-delete2"></use>
          </svg>
        </div>
      </div>
      <div
        class="check-btn"
        @click="getReports"
      >成绩查询</div>
    </div>
    <img
      class="logo"
      src="../../assets/img/newLogo.png"
      alt=""
    />
    <loading ref="loading"></loading>
  </div>
</template>
<script>
import io from '../../lib/io'
import loading from '../../components/common/loading'
export default {
  data() {
    return {
      form: {
        pageIndex: 1,
        pageSize: 1000000,
        phoneNo: '',
        name: '',
        sysCode: '0003'
      }
    }
  },
  created() {
    document.title = '成绩查分系统'
    var _hmt = _hmt || []
    ;(function() {
      var hm = document.createElement('script')
      hm.src = 'https://hm.baidu.com/hm.js?b34555cf0702778837c7c5e2f669b34c'
      var s = document.getElementsByTagName('script')[0]
      s.parentNode.insertBefore(hm, s)
    })()
  },
  components: {
    loading
  },
  methods: {
    getReports() {
      if (!this.form.name.trim()) {
        alert('请输入姓名')
        return false
      }
      this.form.name = this.form.name.trim()
      this.form.phoneNo = this.form.phoneNo.replace(/^\s+|\s+$/g, '')
      if (!/^1[3456789]\d{9}$/.test(this.form.phoneNo)) {
        alert('请输入正确手机号')
        return false
      }
      this.$refs.loading.show = true
      io.post(
        io.reportListOfStudent,
        this.form,
        res => {
          this.$refs.loading.show = false
          if (res.success) {
            window.localStorage.setItem(
              'studentReport',
              JSON.stringify(res.data)
            )
            this.$router.push({
              path: '/c-form'
            })
          }
        },
        () => {
          this.$refs.loading.show = false
        }
      )
    },
    clear(type) {
      switch (type) {
        case 'name':
          this.form.name = ''
          break
        case 'phone':
          this.form.phoneNo = ''
          break
        default:
          break
      }
    }
  }
}
</script>

<style lang="less" scoped>
.index {
  min-height: 100%;
  background: url('../../assets/img/report/i-bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  text-align: center;
  padding-top: 1.96rem;
  background-color: #f8fbfc;
  box-sizing: border-box;
}

.i-input {
  .title {
    font-size: 0.68rem;
    color: #ffffff;
    font-weight: bold;
  }

  .input-div {
    height: 2rem;
    width: 6.3rem;
    box-sizing: border-box;
    padding: 0 0.2rem;
    background: #e9ecfc;
    margin: auto;
    margin-top: 0.55rem;
    margin-bottom: 0.4rem;
    position: relative;

    div {
      height: 1rem;
      display: flex;
      align-items: center;

      input {
        height: 100%;
        background: transparent;
        font-size: 0.28rem;
        margin-left: 0.2rem;
        width: 5.4rem;
        color: #6b6969;
      }

      .icon {
        color: #c1c2c6;
        font-size: 0.5rem;
      }
    }

    .name {
      border-bottom: 0.01rem solid #b0adad;
    }

    .phone {
      .icon {
        font-size: 0.41rem;
      }
    }

    .delete {
      font-size: 0.3rem !important;
      position: absolute;
      right: 0.75rem;
    }
  }

  .check-btn {
    width: 6.3rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #145da0;
    font-size: 0.32rem;
    color: #f8fbfc;
    margin: auto;
  }
}

.logo {
  position: relative;
  width: 2.96rem;
  height: 0.51rem;
  top: 4rem;
}
</style>

